<template>
  <div class="container">
    <div class="heade">
      <div class="header">
        <span class="text1">价格体系设置</span>
        <!-- 收起筛选/展开筛选 -->

        <el-button type="primary" size="mini" class="info">刷新</el-button>
      </div>
      <!-- 以下div为筛选查询 -->
    </div>
    <div class="between">
      <div class="header">
        <span class="text1" style="margin-left: 20px">数据列表</span>

        <el-button
          type="primary"
          size="mini"
          class="info1"
          @click="dialogVisible = true"
          >添加</el-button
        >
        <el-button type="primary" size="mini" class="info">导出</el-button>
        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="price" label-width="80px">
            <el-form-item label="价格体系名称">
              <el-input v-model="price.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="onSubmit"
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div class="between-table">
        <el-table
          :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
          :cell-style="{ fontSize: '12px', textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="id" label="编号" width="400"></el-table-column>
          <el-table-column
            prop="name"
            label="价格体系名称"
            width="400"
          ></el-table-column>
          <el-table-column label="操作">
            <template scope="scope">
              <el-button
                type="text"
                @click="handleDelete(tableData.index)"
                size="small"
                >删除</el-button
              >
              <el-button
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                size="small"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      form: {
        input: "",
        phone: "",
        date: "",
      },
      tableData: [
        {
          id: "11",
          name: "王小虎",
        },
        {
          id: "12",
          name: "企业",
        },
      ],
      dialogVisible: false,
      price: [
        {
          id: "",
          name: "",
        },
      ],
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
.heade-text {
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
}

.heade-form {
  display: flex;
  position: relative;
  top: 12px;
}

.text1 {
  font-size: 14px;
  position: absolute;
  left: 12px;
}

.text2 {
  font-size: 12px;
  position: absolute;
  left: 100px;
  color: red;
}

.text3 {
  font-size: 12px;
  position: absolute;
  left: 180px;
  color: red;
}

.text4 {
  font-size: 12px;
  position: absolute;
  right: 140px;
  cursor: pointer;
}

.info1 {
  font-size: 14px;
  position: absolute;
  right: 70px;
  top: 14px;
}

.info {
  font-size: 14px;
  position: absolute;
  right: 12px;
  top: 14px;
}

.header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(243, 243, 243, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
  margin-top: 20px;
}

.column {
  font-size: 12px;
  margin-right: 5px;
}
</style>